<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<link href="./assets/css/loader.css" rel="stylesheet">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>创建订单</title>
		<link rel="shortcut icon" href="./assets/images/favicon.png">
		
		<link href="./assets/css/order.css" rel="stylesheet">
	</head>
	<body >
		<div id="app">
			<div data-v-621f72da="">
				<div data-v-621f72da="" class="centerContent _clear">
					<div data-v-621f72da="" class="createdLeft pull-left">
						<div data-v-621f72da="" class="houseDetail _clear">
							<div data-v-621f72da="" class="houseImg pull-left">
								<img data-v-621f72da="" :src="roomInfo.pics" width="100%" height="100%">
							</div>
							<div data-v-621f72da="" class="houseRight pull-left">
								<p data-v-621f72da="" class="title text-ellips">{{roomInfo.rname}}</p>
								<div data-v-621f72da="" class="sale-text">
									独立房间·{{roomInfo.bed}}室{{roomInfo.meta}}厅{{roomInfo.nums}}卫</div>
							</div>
						</div>
						<div data-v-621f72da="" class="arrow">
							提交订单后，需要房东确认订单，请及时与房东沟通
						</div>
						<div data-v-621f72da="" class="process">
							<div data-v-621f72da="" class="text">订单流程：</div>
							<div data-v-621f72da="" class="process-list">
								<div data-v-621f72da="" class="process-item">
									<i data-v-621f72da="" class="icon"></i>
									<div data-v-621f72da="" class="item-text">支付订单</div>
									<div data-v-621f72da="" class="line">......</div>
								</div>
								<div data-v-621f72da="" class="process-item">
									<i data-v-621f72da="" class="icon"></i>
									<div data-v-621f72da="" class="item-text">房东确认接单</div>
									<div data-v-621f72da="" class="line">......</div>
								</div>
								<div data-v-621f72da="" class="process-item">
									<i data-v-621f72da="" class="icon"></i>
									<div data-v-621f72da="" class="item-text">订单完成</div>
								</div>
							</div>
						</div>
						<div data-v-621f72da="" class="rules">
							<div data-v-621f72da="" class="text">退款规则：提前退房不返还定金</div>
						</div>
						
						<div data-v-621f72da="" class="detailPeople">
							<div data-v-621f72da="">
								<div data-v-00537af3="" data-v-621f72da="">
									<div data-v-00537af3="" class="livingPeople pointer">
										<a href="javascript:showAddrDiv()"><img data-v-00537af3="" src="img/index.png" alt="" width="19" height="19" style="vertical-align: middle;">
											添加入住人</a>
									</div>
									<div class="common_list_con clearfix">
										<dl id="addr_list">
											<dt>选择入住人：</dt>
												<dd v-for="userItem in userItems" :data-ino="userItem.ino">
													姓名：{{userItem.name}}&nbsp;&nbsp;&nbsp;
													身份证号：{{userItem.cardid}}&nbsp;
												</dd>
										</dl>
										
									</div>
	
									<div id="addr_div" style="display:none">
										<img src="img/close.png" title="关闭" onclick="hiddenDiv()" />
										<form id="myform">
											<ul>
												<li>
													<label for="addr_name">姓名：</label>
													<input id="addr_name" name="name" maxlength="10" type="text" placeholder="请输入姓名" />
												</li>
												<li>
													<label for="addr_card">身份证号码：</label>
													<input id="addr_card" name="cardid" maxlength="18" type="text" placeholder="请输入身份证号码" />
												</li>
												<li class="addr_btn">
													<a href="javascript:addAddr()">添加收货地址</a>
												</li>
											</ul>
										</form>
									</div>
									
								
								</div>
							</div>
						</div>
					</div>
					<div data-v-621f72da="" class="createdRight pull-left">
						<div data-v-621f72da="" class="detailContent">
							<p data-v-621f72da="" class="titleDetail">费用明细</p>
							<div data-v-621f72da="" class="evaluationStart" v-if="roomInfo.tno == 102">
								<div data-v-621f72da="" class="padding30">
									<ul data-v-621f72da="">
										<li data-v-621f72da="" class="_clear" style="padding-top: 0px;">
										<span data-v-621f72da="" class="pull-left gray1">定金(三个月)  </span> 
										<span data-v-621f72da="" class="pull-right black">{{roomInfo.price}}元/月</span>
										</li>
									</ul>
								</div>
								<div data-v-621f72da="" class="padding30">
									<div data-v-621f72da="" class="pay pull-right">
										<span data-v-621f72da="">合计：</span> <span data-v-621f72da=""
											class="money">￥{{roomInfo.price * 3}}</span>
									</div>
								</div>
							</div>
							<div data-v-621f72da="" class="evaluationStart" v-else="roomInfo.tno == 101">
								<div data-v-621f72da="" class="padding30">
									<ul data-v-621f72da="">
										<li data-v-621f72da="" class="_clear" style="padding-top: 0px;">
										<span data-v-621f72da="" class="pull-left gray1">全款  </span> 
										<span data-v-621f72da="" class="pull-right black">{{roomInfo.price}}元</span>
										</li>
									</ul>
								</div>
								<div data-v-621f72da="" class="padding30">
									<div data-v-621f72da="" class="pay pull-right">
										<span data-v-621f72da="">合计：</span> <span data-v-621f72da=""
											class="money">￥{{roomInfo.price}}</span>
									</div>
								</div>
							</div>
						</div>
						<div data-v-621f72da="" class="detailRule">
							<p data-v-621f72da="" class="noteTitle">注意事项</p>
							<div data-v-90d658ca="" data-v-621f72da="" class="rules">
								<div data-v-90d658ca="" class="rules-item">
									<div data-v-90d658ca="" class="title">提供发票：</div>
									<div data-v-90d658ca="" class="text">开具发票需与房东协商</div>
								</div>
								<div data-v-90d658ca="" class="rules-item">
									<div data-v-90d658ca="" class="title">退订规则：</div>
									<div data-v-90d658ca="" class="text">
										<p data-v-90d658ca="">1、入住日前一天14:00前取消订单，全额退款</p>
										<p data-v-90d658ca="">2、距入住日14:00不足24小时取消，扣首晚房费</p>
										<p data-v-90d658ca="">3、入住后提前离店，当日14:00前取消，扣当日房费；当日14:00后取消，扣当日+次日房费</p>
										<div data-v-90d658ca="" class="text">
											<span data-v-90d658ca="">4、享月租或连住优惠的房源规则详情请查看</span> 
											<span data-v-90d658ca="" style="color: rgb(81, 122, 153);">补充退款规则</span>
										</div>
									</div>

								</div>
								<div data-v-90d658ca="" class="rules-item">
									<div data-v-90d658ca="" class="title">入住提示：</div>
									<div data-v-90d658ca="" class="text">
										需2022-07-30 14:00 办理入住，早到可能需要等待。 <br data-v-90d658ca="">
										需2022-08-17 12:00 前办理退房，如需延迟退房请与商户协商。 <br data-v-90d658ca="">
										未到店或未入住时，请勿轻易线下转账支付押金或其他费用，以免上当受骗。
									</div>
								</div>
								<div data-v-90d658ca="" class="rules-item">
									<div data-v-90d658ca="" class="title">用户协议：</div>
									<div data-v-90d658ca="" class="text">
										<span data-v-90d658ca="">继续操作代表您同意</span> 
										<span data-v-90d658ca="" style="color: rgb(81, 122, 153);">《房客规则》</span>
									</div>
								</div>
								<div data-v-90d658ca="" class="rules-item">
									<div data-v-90d658ca="" class="title">在线客服：</div>
									<div data-v-90d658ca="" class="text">微信关注"客多多短租助手"，联系在线客服</div>
								</div>
							</div>
						</div>
						<div data-v-621f72da="" class="submitBtn pointer">
							<button data-v-621f72da="" class="submitBtnStyle anjukeColor" v-if="checkLogin" @Click="pay(roomInfo.rno, user.uno)">提交订单</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="js/jquery-3.4.1.min.js"></script>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="js/axios.js"></script>
		<script type="text/javascript" src="js/qs.js"></script>
		<script type="text/javascript" src="js/coco-message.js"></script>
		
		
		<script type="text/javascript">

		$(function(){
			$("#addr_addr").keyup(function(event){
				if(event.which == 13){
					addAddr();
				}
			});
		})
		function showAddrDiv() {
			$("#myform")[0].reset();
			$("#addr_div").css("display", "block");
		}
		
		function hiddenDiv(){
			$("#addr_div").css("display", "none");
		}
		function addAddr() {
			let objs = $("#myform input, #myform select") ;
			for (let i = 0, len = objs.length; i < len; ++i){
				if ($.trim(objs[i].value)== ""){
					showmsg ("您输入的信息不完整,请完善后重新提交...", "red" );
					return;
				}
				
			}
			let p = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
			if(!p.test($.trim(objs[1].value))){
				alert("信息有误！");
				return;
			}
			$.post ("userItem/add",$ ("#myform").serialize(), rt =>{
				if(rt.code == 200){
					let obj = {ano: rt.data} ;
					obj.name = $.trim ($("#addr_name").val ());
					obj.tel = $.trim ($("#addr_card").val());
					
					axios.get("userItem/findByUno").then (rt =>{
				    	if (rt.status == 200 && rt.data.code == 200){
				    		app.$data.userItems = rt.data.data;
				    		return false;
				    	}
			    	});
					$("#addr_list").load();
					$ ("#myform")[0].reset ();
					hiddenDiv ();
					return;
				}
				showmsg("入住人添加失败,请稍后重试... ", "red");
			}, "json");
		}
		
		function bindInfo(){
			$("#addr_list>dd").click(function(){
				$("#addr_list>dd").removeClass("selectedAddr");
				$(this).addClass("selectedAddr");
			})
		}
		
		</script>
		<script type="text/javascript">
		
		var rno;
		var tno;
		let app = new Vue ( {
	    	el: "#app",
	    	data: {
	    		roomInfo: [],
	    		type: '',
	    		checkLogin: false,
	    		user: {},
	    		userItems: []
	    	},
	    	mounted: function ( ){
	    		axios.get("user/check" ).then (rt =>{
			    	if (rt.status == 200 && rt.data.code == 200){
			    		this.user = rt.data.data;
			    		this.checkLogin = true;

				    	this.findUserItem();
			    		return false;
			    	}
			    	cocoMessage.error("请先登录！", 3000, function(){
	    				location.href="/user/login.html";
	    			});
	    			
	    			return;
		    	})
		    	
	    			rno = decodeURI(location.search);
					if(rno == "" || rno.indexOf('&') <= 0){
						cocoMessage.error("未选择房间信息！", 1500, function(){
							location.href="/room/index.html";
		    			});
						
						return;
					}
					
					details = rno.replace("?","").split("&");
					rno = details[0];
					uno = details[1];
			    	axios.post( "room/findByRno", qs.stringify({rno: rno}) ).then (rt =>{
				    	if (rt.status == 200 && rt.data.code == 200){
				    		this.roomInfo = rt.data.data;
				    		
				    	}
				    	
			    	});	
	    		
	    			
	    		
	    		
	    	},
	    	methods: {
	    		addOrder: function(){
	    			let rno = this.roomInfo.rno;
	    		},
	    		findUserItem: function(){
	    			axios.get("userItem/findByUno").then (rt =>{
				    	if (rt.status == 200 && rt.data.code == 200){
				    		this.userItems = rt.data.data;
				    		this.$nextTick(function(){
								bindInfo();
							})
				    		return false;
				    	}
			    	})
	    		},
	    		pay: function(rno, uno){
	    			let objs = [];
	    			let ino = $("#addr_list>dd[class='selectedAddr']").data("ino");
	    			if(!ino){
	    				cocoMessage.error("请选择入住人！", 3000);

	    				return;
	    			}
	    			axios.post( "order/add", qs.stringify({rno: rno, uno: uno, tno: this.roomInfo.tno, ino: ino}) ).then (rt =>{
				    	if (rt.status == 200 && rt.data.code == 200){
				    		cocoMessage.info(1500, "创建订单成功！请联系房主确认", function () {
					              
					        });
				    		location.href="/user/user.html";
				    		return false;
				    	}
				    	cocoMessage.error("创建订单失败，请稍后重试...", 3000);
			    	});
	    		}
	    	}
	    })
		</script>
	</body>
</html>
